<template>
  <!-- 一级路由 -->
  <el-container class="app-container">
    <div v-if="bossShieldVisible" class="boss-shield" :style="bossShieldStyle"></div>
    <el-aside width="150px">
      <bjsLeftMenu></bjsLeftMenu>
    </el-aside>
    <el-container>
      <el-header class="bjstk-header" height="40px">
        <bjsHeader></bjsHeader>
      </el-header>
      <el-main class="bjstk-main" style="padding: 0;overflow: auto;height: 90%;">
        <keep-alive>
          <router-view v-if="$route.meta.keepalive"/>
        </keep-alive>
        <router-view v-if="!$route.meta.keepalive"/>
      </el-main>
      <el-backtop class="backtop" target=".bjstk-main" :bottom="70">✌</el-backtop>
      <el-footer class="bjs-footer">
        <bjsFooter></bjsFooter>
      </el-footer>
    </el-container>

  </el-container>
</template>

<script>
  import {ipcRenderer} from 'electron'
  import bjsHeader from './index/header.vue'
  import bjsFooter from './index/footer.vue'
  import bjsLeftMenu from './index/leftMenu.vue'

  export default {
  name: 'home',
  data () {
    return {
      bossShieldVisible : false
    }
  },
  computed : {
    bossShieldStyle () {
      return {
        'background-image': 'url(' + this.$store.state.config.bossShield.image + ')',
        'background-size': 'contain',
        'background-repeat': 'no-repeat'
      }
    }
  },
  methods : {
    registerBossShield () {
      // eslint-disable-next-line
      ipcRenderer.on("remote-BossShield",(event,args)=>{
        this.bossShieldVisible = !this.bossShieldVisible
      })
    }
  },
  mounted () {
    this.$router.push('/bjstk/index')
    this.registerBossShield()
  },
  components: {
    bjsHeader, bjsFooter, bjsLeftMenu
  }
}
</script>

<style lang="scss">
  .bjstk-header {
    @include bg_color();
    padding: 0;
  }

  .bjstk-main {
    @include bg_color();
  }

  .backtop {
    height: 40px;
    width: 40px;
    color: #ffffff !important;
    background-color: $theme-color-light-7 !important;
    border-radius: 30% !important;
    text-align: center;
    line-height: 40px;
    transition: border-radius 0.3s;
    [data-theme="night"] & {
      color: $theme-color-night-dark !important;
      background-color: #464646 !important;
    }

    &:hover {
      border-radius: 100% 100% 0 0 !important;
    }
  }
  .app-container {
    @include boxBase(100%,100%);
    @include home-border();
    border: 1px solid;
  }

  .bjs-footer {
    @include bg_color_left();
    @include flex(row,flex-start,center);
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    font-size: 12px;
  }

  .boss-shield {
    @include boxBase(100%,100%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
  }
</style>
